<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('需求列表')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
	<div class="ui-layout-west">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title">
					<i class="fa icon-grid"></i> 需求分类
				</div>
				<div class="box-tools pull-right">
					<a type="button" class="btn btn-box-tool" href="#" onclick="resourceType()" title="管理分类"><i class="fa fa-edit"></i></a>
					<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
				</div>
			</div>
			<div class="ui-layout-content">
				<div id="tree" class="ztree"></div>
			</div>
		</div>
	</div>

	<div class="ui-layout-center">
		<div class="container-div">
			<div class="row">
				<div class="col-sm-12 search-collapse">
					<form id="formId">
						<input type="hidden" id="reqType" name="reqType">
						<div class="select-list">
							<ul>
								<li>
									关键词：<input type="text" name="reqName"/>
								</li>
								<li>
									需求状态：
									<select name="status" th:with="type=${@dict.getType('bus_req_status')}">
										<option value="">所有</option>
										<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
									</select>
								</li>
								<li>
									启用状态：<select name="useStatus" th:with="type=${@dict.getType('sys_normal_disable')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
									</select>
								</li>
								<li>
									所属组织：<input type="text" name="deptName"/>
								</li>

								<li>
									发布人：<input type="text" name="publishUserName"/>
								</li>

								<li>
									<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
									<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
								</li>
							</ul>
						</div>
					</form>
				</div>

				<div class="btn-group-sm" id="toolbar" role="group">
					<a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:busResource:add">
						<i class="fa fa-plus"></i> 新增
					</a>
					<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:busResource:remove">
						<i class="fa fa-remove"></i> 删除
					</a>
				</div>
				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table" data-mobile-responsive="true"></table>
				</div>
			</div>
		</div>
	</div>

	<th:block th:include="include :: footer" />
	<th:block th:include="include :: layout-latest-js" />
	<th:block th:include="include :: ztree-js" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('system:busReq:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:busReq:remove')}]];
		var auditFlag = [[${@permission.hasPermi('system:busReqApply:view')}]];
		var detailFlag = [[${@permission.hasPermi('system:busReq:view')}]];

		var datas = [[${@dict.getType('bus_req_status')}]];

        var prefix = ctx + "system/busReq";

        $(function() {
			var panehHidden = false;
			if ($(this).width() < 769) {
				panehHidden = true;
			}
			$('body').layout({ initClosed: panehHidden, west__size: 185 });
			// 回到顶部绑定
			if ($.fn.toTop !== undefined) {
				var opt = {
					win:$('.ui-layout-center'),
					doc:$('.ui-layout-center')
				};
				$('#scroll-up').toTop(opt);
			}

			queryReqList();
			queryTypeTree();
        });

		function queryReqList() {
			var options = {
				url: prefix + "/list",
				createUrl: prefix + "/add",
				updateUrl: prefix + "/edit/{id}",
				removeUrl: prefix + "/remove",
				modalName: "需求",
				showExport: true,
				columns: [{
					checkbox: true
				},{
					field : 'reqId',
					title : '需求id'
				},{
					field : 'typeName',
					title : '需求分类',
					sortable: true
					},
					{
						field : 'reqName',
						title : '需求名称',
						sortable: true
					},
					{
						field : 'label',
						title : '需求标签',
						sortable: true
					},
					{
						field: 'status',
						title: '需求状态',
						align: "left",
						formatter: function(value, item, index) {
							return $.table.selectDictLabel(datas, item.status);
						}
					},
					{
						field : 'publishDeptName',
						title : '所属组织',
						sortable: true
					},
					{
						field : 'publishUserName',
						title : '发布人',
						sortable: true
					},
					{
						visible: editFlag == 'hidden' ? false : true,
						title: '启用状态',
						align: 'center',
						formatter: function (value, row, index) {
							return statusTools(row);
						}
					},
					{
						field : 'createTime',
						title : '创建时间',
						sortable: true
					},
					{
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.reqId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
							actions.push("<a class='btn btn-warning btn-xs " + detailFlag + "' href='javascript:void(0)' onclick='detail(" + row.reqId + ")'><i class='fa fa-search'></i>详细</a> ");
							actions.push("<a class='btn btn-primary btn-xs " + auditFlag + "' href='javascript:void(0)' onclick='apply(" + row.reqId + ")'><i class='fa fa-list-ul'></i>应答</a> ");
							actions.push("<a class='btn btn-danger btn-xs " + removeFlag + "' href='javascript:void(0)' onclick='del(" + row.reqId + ")'><i class='fa fa-remove'></i>删除</a> ");
							return actions.join('');
						}
					}]
			};
			$.table.init(options);
		}

		/* 资源需求-需求详情 */
		function detail(reqId) {
			var url = ctx + 'system/busReq/detail/' + reqId;
			$.modal.openTab("需求详情", url);
		}

		/* 资源需求-需求申请 */
		function apply(reqId) {
			var url = ctx + 'system/busReq/apply/' + reqId;
			$.modal.openTab("需求应答", url);
		}

		/* 资源需求-删除资源 */
		function del(reqId) {
			$.modal.confirm("确认要删除需求吗？", function() {
				$.operate.post(prefix + "/remove", { "ids": reqId});
			})
		}

		/* 资源需求-需求分类 */
		function resourceType() {
			var url = ctx + "system/busResourceType";
			$.modal.openTab("需求分类", url);
		}

		$('#btnExpand').click(function() {
			$._tree.expandAll(true);
			$(this).hide();
			$('#btnCollapse').show();
		});

		$('#btnCollapse').click(function() {
			$._tree.expandAll(false);
			$(this).hide();
			$('#btnExpand').show();
		});

		$('#btnRefresh').click(function() {
			queryTypeTree();
		});


		function queryTypeTree(){
			var url = ctx + "system/busResourceType/busResourceTreeData";
			var options = {
				url: url,
				expandLevel: 2,
				onClick : zOnClick
			};
			$.tree.init(options);

			function zOnClick(event, treeId, treeNode) {
				$("#reqType").val(treeNode.id);
				//$("#parentId").val(treeNode.pId);
				$.table.search();
			}
		}

		/* 需求启用状态显示 */
		function statusTools(row) {
			if (row.useStatus == 1) {
				return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.reqId + '\')"></i> ';
			} else {
				return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.reqId + '\')"></i> ';
			}
		}

		/* 资源需求-停用 */
		function disable(reqId) {
			$.modal.confirm("确认要停用需求吗？", function() {
				$.operate.post(prefix + "/changeStatus", { "reqId": reqId, "useStatus": 1 });
			})
		}

		/* 资源需求-启用 */
		function enable(reqId) {
			$.modal.confirm("确认要启用需求吗？", function() {
				$.operate.post(prefix + "/changeStatus", { "reqId": reqId, "useStatus": 0 });
			})
		}


    </script>
</body>
</html>